<template>
  <div class="client-add">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template #footer>
        <a-space :size="20">
          <a-button type="outline" @clikc="router.go(-1)">
            <template #default>取消</template>
          </a-button>
          <a-button type="primary" @click="submit">
            <template #default>执行</template>
          </a-button>
        </a-space>
      </template>
      <div class="base-info">
        <TitleBox title="基本消息"></TitleBox>
        <div class="base-info-header">
          <a-form
            style="width: 60%"
            ref="formRef"
            :model="form"
            auto-label-width
          >
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="委外发货单号:"
                  ><a-input
                    style="width: 320px"
                    placeholder="系统自动生成"
                    disabled
                    v-model="form.number"
                /></a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  required
                  field="outsourcingId"
                  label="关联工序委外单："
                >
                  <a-select
                    v-model="form.outsourcingId"
                    :style="{ width: '320px' }"
                    @change="getInfo"
                  >
                    <a-option
                      v-for="item in orderList"
                      :key="item.id"
                      :value="item.id"
                      >{{ item.number }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <TitleBox title="物料发货明细"></TitleBox>
        <div class="base-info-header">
          <a-table
            style="padding: 0 50px; width: 100%"
            :stripe="true"
            :dordered="{
              headerCell: true,
            }"
            :data="form.warehouseInvoiceItem"
            :scroll="scroll"
            :pagination="false"
          >
            <template #columns>
              <a-table-column
                title="物料编码"
                :width="100"
                align="center"
                data-index="number"
              ></a-table-column>
              <a-table-column
                title="物料名称"
                :width="100"
                align="center"
                data-index="name"
              ></a-table-column>
              <a-table-column title="规格型号" :width="100" align="center"
                ><template #cell="{ record }">
                  <a-input disabled v-model="record.spec" /> </template
              ></a-table-column>
              <a-table-column
                title="推荐委外发货数量"
                :width="100"
                align="center"
                ><template #cell="{ record }">
                  <a-input-number
                    :min="1"
                    disabled
                    v-model="record.amount"
                  /> </template
              ></a-table-column>
            </template>
          </a-table>
        </div>
      </div>
      <!-- <div>
        <div class="info-item">
          <div style="width: 100%; display: flex; margin: 20px 50px">
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <h3>基本信息</h3>
            </a-space>
          </div>
          <div style="margin-left: 10%"
            ><a-form ref="formRef" :model="form" auto-label-width>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="委外发货单号:"
                    ><a-input
                      style="width: 320px"
                      placeholder="系统自动生成"
                      disabled
                      v-model="form.number"
                  /></a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item
                    required
                    field="outsourcingId"
                    label="关联工序委外单："
                  >
                    <a-select
                      v-model="form.outsourcingId"
                      :style="{ width: '320px' }"
                      @change="getInfo"
                    >
                      <a-option
                        v-for="item in orderList"
                        :key="item.id"
                        :value="item.id"
                        >{{ item.number }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>

          <div style="width: 100%; display: flex; margin: 20px 50px">
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <a-space :size="50"><h3>物料发货明细 ：</h3></a-space>
            </a-space>
          </div>
          <div
            style="
              width: 90%;
              margin-left: 5%;
              box-shadow: 1px 1px 5px rgb(153 153 153 / 35%);
              border-radius: 4px;
            "
          >
            <div style="padding: 30px">
              <div style="text-align: right" class="button-item"></div>
              <a-table
                :stripe="true"
                :dordered="{
                  headerCell: true,
                }"
                :data="form.warehouseInvoiceItem"
                :scroll="scroll"
                :pagination="false"
              >
                <template #columns>
                  <a-table-column
                    title="物料编码"
                    :width="100"
                    align="center"
                    data-index="number"
                  ></a-table-column>
                  <a-table-column
                    title="物料名称"
                    :width="100"
                    align="center"
                    data-index="name"
                  ></a-table-column>
                  <a-table-column title="规格型号" :width="100" align="center"
                    ><template #cell="{ record }">
                      <a-input disabled v-model="record.spec" /> </template
                  ></a-table-column>
                  <a-table-column
                    title="推荐委外发货数量"
                    :width="100"
                    align="center"
                    ><template #cell="{ record }">
                      <a-input-number
                        :min="1"
                        disabled
                        v-model="record.amount"
                      /> </template
                  ></a-table-column>
                </template> </a-table
            ></div>
          </div>
        </div>
      </div> -->
    </pageHeader>
  </div>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    computed,
    onMounted,
    defineAsyncComponent,
  } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import {
    GetPersonnelinformation,
    Getsingleperson,
  } from '@/api/home/System settings/personal-information/index';
  import { postOutsourcingInvoice } from '@/api/inventory-management/outbound-management/sales-shipment-outbound/sales-outbound/index';
  import { PostOutboundAll } from '@/api/inventory-management/outbound-management/sales-shipment-outbound/sales-outbound/index';
  import { cloneDeep } from 'lodash';
  import { Message } from '@arco-design/web-vue';
  import {
    getOutsourcingAll,
    delOutsourcingOne,
    confirmOutsourcingOne,
    getOutsourcingOne,
  } from '@/api/produce-management/production-operation/index';
  import {
    getInvoiceOne,
    postInvoice,
  } from '@/api/inventory-management/outbound-management/sales-shipment-outbound/sales-outbound/index';
  import {
    getOutboundDetails,
    putOutboundConfirm,
  } from '@/api/inventory-management/outbound-management/sales-shipment-outbound/sales-outbound/index';

  const formRef = ref();
  const OccupiedVisible = ref(false);
  const OccupiedId = ref();
  const detailData = ref();
  const orderNumber = ref();
  // 获取人员信息
  const Personne = ref();
  const Personnelinformation = async () => {
    const res = await GetPersonnelinformation({ page: 0, size: -1 });
    Personne.value = res.content.data;
  };
  Personnelinformation();
  const modelVisible = ref(false);
  const route = useRoute();
  const router = useRouter();
  const tableRef = ref();
  const modelVisibleQr = ref(false);
  const title: string = '新建委外发货单';
  const breadCrumb: string[] = [
    '库存管理',
    '出库管理',
    '销售出库',
    '新建委外发货单',
  ];
  const entryType = Number(route.query.entryType);
  const form = ref<any>({
    number: '',
    state: 1,
  });

  // 表格配置
  const args = reactive({
    stripe: false,
    scroll: {
      y: 2000,
      x: 500,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });

  const orderList = ref([]);
  const getData = async () => {
    try {
      let res = await getOutsourcingAll({
        warehouseState: 1,
        outsourcingType: 2,
        page: 1,
        size: -1,
      });
      if (res.content === null || res.content === undefined) {
        res.content = [];
      }
      res.content.forEach((element: any) => {
        if (element.itemState === 2 && element.state === 2)
          orderList.value.push({ ...element });
      });
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getData();
  const isSelectSupplier = ref(false);

  const getInfo = async (ids: number) => {
    const res = await getOutsourcingOne({ id: ids });
    form.value = {
      ...form.value,
      outsourcingId: res.id,
      outsourcingNumber: res.number,
      invoiceType: 2,
      warehouseInvoiceItem: res.item,
      itemState: res.itemState,
      outboundId: res.outboundId || null,
    };
    if (res.itemState === 1 && res.outboundId) {
      const data = await getOutboundDetails({ id: res.outboundId });
      form.value.invoiceState = data.invoiceState;
      form.value.warehouseInvoiceItem = data.OutboundWarehouseItem;
    }
    if (form.value.invoiceState === 2) {
      Message.warning('当前委外单已全部完成发货！');
      form.value.outsourcingId = null;
      return;
    }
    form.value.warehouseInvoiceItem.push({
      name: res.managementName,
      number: res.managementNumber,
      spec: res.spec,
      amount: res.amount,
      managementId: res.managementId,
      outsourcingId: res.id,
      invoiceType: 2,
      invoiceAmount: 0,
    });
    form.value.warehouseInvoiceItem?.forEach((element: any) => {
      element.name = element.name || element.productName;
      element.number = element.number || element.productNumber;
      element.orderProductId = res.id;
      element.state = 1;
      delete element.id;
    });
  };

  const submit = () => {
    formRef.value.validate(async (res: any) => {
      if (!res) {
        delete form.value.invoiceState;
        await postOutsourcingInvoice({
          ...form.value,
        });
        router.back();
      }
    });
  };
</script>

<style scoped lang="less">
  .client-add {
    .base-info {
      padding: 10px 40px 10px 40px;

      .avatar {
        position: absolute;
        width: 100px;
      }
      &-header {
        // padding: 0 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // :deep(.arco-form-item-content-flex) {
        //   display: block;
        //   line-height: 32px;
        //   color: #cccccc29;
        // }
      }

      &-extra {
        .contact-info,
        .invoice-info,
        .client-info,
        .remarks-info {
          padding: 0 100px;
        }
      }
    }
  }

  :deep(.arco-table-th) {
    font-weight: bold;
    // font-size: 13px;
  }
</style>
